.Hide (), .show () veya .toggle () işlevlerini kullanarak bir öğenin görünürlüğünü değiştirmek mümkün müdür?
Bir öğenin görünür veya gizli olup olmadığını nasıl test edersiniz?
2020-12-07 21:54:52
1
2
Sonraki
Soru tek bir öğeyi ifade ettiğinden, bu kod daha uygun olabilir:
// CSS içeriğini görüntüleme için kontrol eder: [yok | engelle], görünürlüğü yok sayar: [doğru | yanlış]
$ (element) .is (": görünür");
// Aynısı gizli ile de çalışır
$ (element) .is (": gizli");
Twernt'in önerisiyle aynıdır, ancak tek bir öğeye uygulanır; ve jQuery SSS bölümünde önerilen algoritma ile eşleşir.
Seçilen öğeyi başka bir öğe, seçici veya herhangi bir jQuery nesnesiyle kontrol etmek için jQuery's is () kullanırız. Bu yöntem, iletilen parametreyi karşılayan bir eşleşme bulmak için DOM öğeleri boyunca dolaşır. Bir eşleşme varsa doğru, aksi takdirde yanlış döndürür.
|
Gizli seçiciyi kullanabilirsiniz:
// Gizli olan tüm öğelerle eşleşir
$ ['element: gizli')
Ve görünür seçici:
// Görünen tüm öğelerle eşleşir
$ ['element: görünür')
|
eğer ($ (element) .css ('display') == 'none' || $ (element) .css ("görünürlük") == "gizli") {
// 'eleman' gizli
}
Yukarıdaki yöntem ebeveynin görünürlüğünü dikkate almaz. Ebeveyni de değerlendirmek için .is (": hidden") veya .is (": visible") kullanmalısınız.
Örneğin,
Div2
Yukarıdaki yöntem div2'yi görünür olarak kabul eder, while: visible değil. Ancak yukarıdakiler birçok durumda yararlı olabilir, özellikle gizli üst öğede görünen herhangi bir hata div'i olup olmadığını bulmanız gerektiğinde, çünkü bu tür durumlarda: visible çalışmaz.
|
Bu yanıtların hiçbiri, benim aradığım "Görünürlüğü olan öğeleri nasıl ele alabilirim: gizli?" Her ikisi de belgelere göre görüntü aradıklarından, ne: visible ne de: hidden bu sorunu çözmez. Belirleyebildiğim kadarıyla, CSS görünürlüğünü ele alacak bir seçici yok. İşte bunu nasıl çözdüm (standart jQuery seçiciler, daha yoğun bir sözdizimi olabilir):
$ (". öğe"). her biri (function () {
eğer ($ (this) .css ("görünürlük") == "gizli") {
// görünmeyen durumu ele al
} Başka {
// görünür durumu ele al
}
});
|
Başlangıçtan Geçişli bir öğenin durumunu nasıl belirleyebilirim?
: Visible ve: hidden seçicilerini kullanarak bir öğenin daraltılmış olup olmadığını belirleyebilirsiniz.
var isVisible = $ ('# myDiv']. is (': görünür');
var isHidden = $ ['# myDiv']. is (': gizli');
Görünürlüğüne göre bir öğeye göre hareket ediyorsanız, seçici ifadesine sadece: visible veya: hidden öğesini ekleyebilirsiniz. Örneğin:
$ ('# myDiv: görünür'). animate ({sol: '+ = 200px'}, 'yavaş');
|
Çoğunlukla bir şeyin görünür olup olmadığını kontrol ederken, hemen devam edecek ve onunla başka bir şey yapacaksınız. jQuery zincirleme bunu kolaylaştırır.
Dolayısıyla, bir seçiciniz varsa ve yalnızca görünür veya gizliyse üzerinde bazı eylemler gerçekleştirmek istiyorsanız, filtre (": görünür") veya filtre (": gizli") kullanabilir ve ardından bunu istediğiniz eylemle zincirleyebilirsiniz. almak.
Yani bir if ifadesi yerine, şunun gibi:
eğer ($ ['# btnUpdate']. is (": görünür"))
{
$ ('# btnUpdate'). animate ({genişlik: "toggle"}); // Düğmeyi gizle
}
Veya daha verimli, ancak daha da çirkin:
var düğmesi = $ ('# btnUpdate');
eğer (button.is (": görünür"))
{
button.animate ({width: "toggle"}); // Düğmeyi gizle
}
Hepsini tek bir satırda yapabilirsiniz:
$ ('# btnUpdate'). filter (": visible"). animate ({width: "toggle"});
|
JQuery belgelerine göre: görünür seçici:
Yok olan bir CSS görüntüleme değerine sahipler.
Type = "hidden" olan form öğeleridir.
Genişlikleri ve yükseklikleri açıkça 0'a ayarlanmıştır.
Bir üst öğe gizlidir, bu nedenle öğe sayfada gösterilmez.
Görünürlüğü olan öğeler: gizli veya opaklık: 0, yine de mizanpajda yer kapladıkları için görünür olarak kabul edilir.
Bu, bazı durumlarda kullanışlıdır ve diğerlerinde yararsızdır, çünkü öğenin görünür olup olmadığını kontrol etmek istiyorsanız (display! = None), ebeveyn görünürlüğünü göz ardı ederek, bunun .css ("display") == 'none 'sadece daha hızlı değil, aynı zamanda görünürlük kontrolünü de doğru şekilde döndürecektir.
Görüntü yerine görünürlüğü kontrol etmek istiyorsanız, şunu kullanmalısınız: .css ("visibility") == "hidden".
Ayrıca ek jQuery notlarını da dikkate alın:
Çünkü: visible, bir jQuery uzantısıdır ve CSS belirtiminin parçası değildir,: visible kullanan sorgular, yerel DOM querySelectorAll () yöntemi tarafından sağlanan performans artışından yararlanamaz. Öğeleri seçerken en iyi performansı elde etmek için: öğeleri seçmek için görünür, önce öğeleri saf bir CSS seçici kullanarak seçin, sonra .filter (": visible") kullanın.
Ayrıca, performans konusunda endişeleriniz varsa, Şimdi beni görüyorsunuz… performansı göster / gizle (2010-05-04) seçeneğini işaretlemelisiniz. Ve öğeleri göstermek ve gizlemek için diğer yöntemleri kullanın.
|
Bu benim için çalışıyor ve div'imi gizli / görünür yapmak için show () ve hide () kullanıyorum:
eğer ($ (this) .css ('display') == 'none') {
/ * kodunuz buraya gelecek * /
} Başka {
/ * alternatif mantık * /
}
|
Öğe görünürlüğü ve jQuery nasıl çalışır;
Bir öğe ekranla gizlenebilir: yok,görünürlük: gizli veya opaklık: 0. Bu yöntemler arasındaki fark:
display: hiçbiri öğeyi gizlemez ve herhangi bir yer kaplamaz;
görünürlük: gizli öğeyi gizler, ancak yine de mizanpajda yer kaplar;
opaklık: 0, öğeyi "görünürlük: gizli" olarak gizler ve yine de mizanpajda yer kaplar; tek fark, opaklığın bir öğeyi kısmen saydam yapmasına izin vermesidir;
eğer ($ ['. hedef']. is (': gizli')) {
$ ('. hedef']. show ();
} Başka {
$ ('. hedef']. hide ();
}
eğer ($ ['. hedef']. is (': görünür')) {
$ ('. hedef']. hide ();
} Başka {
$ ('. hedef']. show ();
}
eğer ($ ('. target-visibility']. css ('visibility') == 'hidden') {
$ ('. target-visibility']. css ({
görünürlük: "görünür",
Görüntüle: ""
});
} Başka {
$ ('. target-visibility']. css ({
görünürlük: "gizli",
Görüntüle: ""
});
}
eğer ($ ('. target-visibility']. css ('opacity') == "0") {
$ ('. target-visibility']. css ({
opaklık: "1",
Görüntüle: ""
});
} Başka {
$ ('. target-visibility']. css ({
opaklık: "0",
Görüntüle: ""
});
}
Kullanışlı jQuery geçiş yöntemleri:
$ ('. click']. click (function () {
$ ('. hedef']. toggle ();
});
$ ('. click']. click (function () {
$ ('. hedef']. slideToggle ();
});
$ ('. click']. click (function () {
$ ('. hedef']. fadeToggle ();
});
|
Bunu düz JavaScript kullanarak da yapabilirsiniz:
function isRendered (domObj) {
eğer ((domObj.nodeType! = 1) || (domObj == document.body)) {
doğruya dön;
}
if (domObj.currentStyle && domObj.currentStyle ["display"]! = "none" && domObj.currentStyle ["görünürlük"]! = "gizli") {
dönüş isRendered (domObj.parentNode);
} else if (window.getComputedStyle) {
var cs = document.defaultView.getComputedStyle (domObj, null);
if (cs.getPropertyValue ("display")! = "none" && cs.getPropertyValue ("visibility")! = "hidden") {
dönüş isRendered (domObj.parentNode);
}
}
yanlış dönüş;
}
Notlar:
Her yerde çalışır
İç içe öğeler için çalışır
CSS ve satır içi stiller için çalışır
Bir çerçeve gerektirmez
|
CSS sınıfını kullanırdım .hide {display: none! İmportant; }.
Gizlemek / göstermek için .addClass ("gizle") /. RemoveClass ("gizle") adını veriyorum. Görünürlüğü kontrol etmek için .hasClass ("gizle") kullanıyorum.
.Toggle () veya .animate () yöntemlerini kullanmayı planlamıyorsanız öğeleri kontrol etmenin / gizlemenin / göstermenin basit ve açık bir yoludur.
|
Demo Bağlantısı
$ ('# clickme']. click (function () {
$ ('# kitap']. toggle ('yavaş', işlev () {
// Animasyon tamamlandı.
alert ($ ('# kitap'). is (": görünür")); // <--- Gizli ise Yanlış Görünüyorsa DOĞRU
});
});
Buraya Tıkla
Kaynak:
Blogger Tak ve Çalıştır - jQuery Araçları ve Pencere Öğeleri: Öğenin gizli veya jQuery Kullanılarak Görünür Olup Olmadığını Anlama
|
Gizli veya görünür öznitelikler basitçe kullanılabilir, örneğin:
$ ['element: gizli')
$ ['element: görünür')
Veya aynısını aşağıdaki gibi basitleştirebilirsiniz.
$ (element) .is (": görünür")
|
ebdiv, style = "display: none;" olarak ayarlanmalıdır. Hem göstermek hem de saklamak için çalışıyor:
$ (belge) .ready (işlev () {
$ ("# eb"). tıklayın (function () {
$ ("# ebdiv"). toggle ();
});
});
|
Dikkate almanız gereken bir başka cevap da, eğer bir öğeyi gizliyorsanız, jQuery kullanmanız gerekir, ancak onu gerçekten gizlemek yerine, tüm öğeyi kaldırırsınız, ancak HTML içeriğini ve etiketinin kendisini bir jQuery değişkenine kopyalayıp Tek yapmanız gereken, ekranda böyle bir etiket olup olmadığını test etmek, normal if (! $ ('# theagname']. length).
|
Bir öğeyi jQuery'de gizli seçici karşısında test ederken, mutlak konumlandırılmış bir öğenin, alt öğeleri görünür olmasına rağmen gizli olarak tanınabileceği dikkate alınmalıdır.
Bu, ilk etapta biraz mantıksız görünüyor - jQuery belgelerine daha yakından bakmak, ilgili bilgileri veriyor:
Öğeler çeşitli nedenlerle gizli olarak kabul edilebilir: [...] Genişlikleri ve yükseklikleri açıkça 0'a ayarlanmıştır. [...]
Yani bu aslında kutu modeli ve eleman için hesaplanan stil açısından mantıklı. Genişlik ve yükseklik açıkça 0 olarak ayarlanmasa bile, dolaylı olarak ayarlanabilir.
Aşağıdaki örneğe bir göz atın:
console.log ($ ['. foo']. is (': gizli')); // doğru
console.log ($ ['. bar']. is (': gizli')); // yanlış
.foo {
konum: mutlak;
sol: 10px;
üst: 10px;
arka plan: # ff0000;
}
.bar {
konum: mutlak;
sol: 10px;
üst: 10px;
genişlik: 20px;
yükseklik: 20px;
arka plan: # 0000ff;
}
JQuery 3.x için güncelleme:
JQuery 3 ile açıklanan davranış değişecek! Sıfır genişlik ve / veya yüksekliğe sahip olanlar da dahil olmak üzere herhangi bir yerleşim kutusu varsa, öğeler görünür olarak kabul edilecektir.
JQuery 3.0.0-alpha1 ile JSFiddle:
http://jsfiddle.net/pM2q3/7/
Aynı JavaScript kodu daha sonra şu çıktıya sahip olacaktır:
console.log ($ ['. foo']. is (': gizli')); // yanlış
console.log ($ ['. bar']. is (': gizli'));// yanlış
|
Bu işe yarayabilir:
bekle ($ ("# mesaj_div"). css ("görüntüleme")). toBe ("yok");
|
Misal:
$ (belge) .ready (işlev () {
eğer ($ ("# checkme: gizli"). uzunluk) {
console.log ('Gizli');
}
});
Kategori: Balık
Ürün: Somon Atlantik
Tür: Salmo salar
Formu: Biftek
|
Görünüp görünmediğini kontrol etmek için kullanıyorum!:
eğer (! $ ['# kitap']. is (': görünür')) {
uyarı ('# kitap görünmüyor')
}
Veya aşağıdaki aynı zamanda, jQuery seçiciyi birden çok kez ihtiyaç duyduğunuzda daha iyi performansa sahip olmak için bir değişkene kaydederek:
var $ kitap = $ ('# kitap')
eğer (! $ book.is (': visible')) {
uyarı ('# kitap görünmüyor')
}
|
Stil düzenlemeyi değil, sınıf geçişini kullanın. . .
Öğeleri "gizlemek" için belirlenmiş sınıfları kullanmak kolaydır ve aynı zamanda en verimli yöntemlerden biridir. Görüntü stili 'yok' olan bir sınıfın 'gizli' olarak değiştirilmesi, bu stili doğrudan düzenlemekten daha hızlı sonuç verecektir. Bunun bir kısmını Stack Overflow sorusunda oldukça ayrıntılı bir şekilde açıkladım.Aynı div içinde iki öğeyi görünür / gizli hale getirme.
En İyi JavaScript Uygulamaları ve Optimizasyonu
İşte Google ön uç mühendisi Nicholas Zakas'ın Google Tech Talk'un gerçekten aydınlatıcı bir videosu:
Javascript'inizi Hızlandırın (YouTube)
|
Reklam engelleyici için görünür kontrolü kullanma örneği etkinleştirildi:
$ (belge) .ready (işlev () {
eğer (! $ ("# ablockercheck"). is (": görünür"))
$ ("# ablockermsg"). text ("Lütfen reklam engelleyiciyi devre dışı bırakın."). show ();
});
"ablockercheck", adblocker'ın engellediği bir kimliktir. Dolayısıyla, görünür olup olmadığını kontrol ederek, reklam engelleyicinin Açık olup olmadığını tespit edebilirsiniz.
|
Ne de olsa hiçbir örnek bana uymuyor, bu yüzden kendim yazdım.
Testler (Internet Explorer filtresi desteği yok: alfa):
a) Belgenin gizli olup olmadığını kontrol edin
b) Bir elemanın sıfır genişlik / yükseklik / opaklığa sahip olup olmadığını kontrol edin veya görüntü: yok / görünürlük: satır içi stillerde gizli
c) Öğenin merkezinin (her piksel / köşeyi test etmekten daha hızlı olması nedeniyle) başka bir öğe (ve tüm atalar, örneğin: overflow: hidden / scroll / bir öğe diğerinin üzerinde) veya ekran kenarları tarafından gizlenmediğini kontrol edin
d) Bir elemanın sıfır genişlik / yükseklik / opaklığa sahip olup olmadığını kontrol edin veya görüntü: yok / görünürlük: hesaplanan stillerde gizli (tüm atalar arasında)
Üzerinde test edildi
Android 4.4 (Yerel tarayıcı / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (Internet Explorer 5-11 belge modu + sanal makine) ve Safari (Windows / Mac / iOS).
var is_visible = (function () {
var x = window.pageXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset? window.pageYOffset + window.innerHeight - 1: 0,
göreli = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
function inside (child, parent) {
while (çocuk) {
eğer (çocuk === ebeveyn) true döndürür;
child = child.parentNode;
}
yanlış dönüş;
};
dönüş işlevi (elem) {
Eğer (
document.hidden ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'gizli' ||
elem.style.display == 'yok' ||
elem.style.opacity === 0
) yanlış döndür;
var rect = elem.getBoundingClientRect ();
eğer (göreceli) {
eğer (! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) false döndürürse;
} else if (
! içinde (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.left + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (window.innerWidth || document.documentElement.clientWidth)
)
) yanlış döndür;
eğer (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = null;
while (el) {
eğer (el === belge) {break;} else if (! el.parentNode) yanlış döndürür;
comp = window.getComputedStyle? window.getComputedStyle (el, null): el.currentStyle;
eğer (comp && (comp.visibility == 'hidden' || comp.display == 'none' || (typeof comp.opacity! == 'undefined' && comp.opacity! = 1))) false döndür;
el = el.parentNode;
}
}
doğruya dön;
}
}) ();
Nasıl kullanılır:
is_visible (elem) // boole
|
İkisini de kontrol etmeniz gerekiyor ... Görünürlüğün yanı sıra ekran:
eğer ($ (this) .css ("display") == "yok" || $ (this) .css ("visibility") == "gizli") {
// Öğe görünmüyor
} Başka {
// Eleman görülebilir
}
$ (This) .is (": visible") olup olmadığını kontrol edersek, jQuery her ikisini de otomatik olarak kontrol eder.
|
Belki böyle bir şey yapabilirsin
$ (belge) .ready (işlev () {
var visible =$ ['# tElement']. is (': görünür');
eğer (görünür) {
uyarı ("görünür");
// Kod
}
Başka
{
uyarı ("gizli");
}
});
Ad
|
Aşağıdaki gibi bir boole değerini kontrol ederek görünürlüğü kontrol edin:
eğer (this.hidden === yanlış) {
// Senin kodun
}
Bu kodu her işlev için kullandım. Aksi takdirde, bir öğenin görünürlüğünü kontrol etmek için is (': visible') kullanabilirsiniz.
|
Görünürlük: gizli veya opaklık: 0 olan Öğeler görünür olarak kabul edildiğinden, düzende hala yer kapladıkları için (jQuery: visible Selector için açıklandığı gibi) - öğenin gerçekten görünür olup olmadığını şu şekilde kontrol edebiliriz:
function isElementReallyHidden (el) {
$ (el) .is (": gizli") || $ (el) .css ("görünürlük") == "gizli" || $ (el) .css ('opaklık') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl) .parents (). her biri (function () {
if (isElementReallyHidden (this)) {
booElementReallyShowed = false;
}
});
|
Peki ya öğenin CSS'si aşağıdaki gibiyse?
.element {
konum: mutlak; sol: -9999;
}
Bu nedenle Yığın Taşması sorusuna verilen bu yanıt Bir öğenin ekran dışında olup olmadığı nasıl kontrol edilir de dikkate alınmalıdır.
|
Öğenin kullanıcı arayüzünde gösterilip gösterilmediğini ölçmek için görünürlük / görüntüleme niteliklerini kontrol etmek için bir işlev oluşturulabilir.
function checkUIElementVisible (element) {
return ((element.css ('görüntü')! == 'yok') && (element.css ('görünürlük')! == 'gizli'));
}
Çalışma Keman
|
Ayrıca, öğenin durumunu kontrol etmek ve sonra değiştirmek için üç terimli koşullu ifade de burada verilmiştir:
$ ['someElement']. on ('click', function () {$ ('elementToToggle']. is (': visible')? $ ['elementToToggle']. hide ('yavaş'): $ ('elementToToggle ') .show (' yavaş ');});
|
eğer ($ ['# postcode_div']. is (': görünür')) {
eğer ($ ['# postcode_text']. val () == '') {
$ ('# spanPost']. metin ('\ u00a0');
} Başka {
$ ('# spanPost']. text ($ ('# postcode_text'). val ());
}
|
1
2
Sonraki
Oldukça aktif soru. Bu soruyu cevaplamak için 10 itibar kazanın. İtibar koşulu, bu sorunun istenmeyen postalardan ve yanıtlanmayan etkinliklerden korunmasına yardımcı olur.
Aradığın cevap değil mi? Javascript jquery dom visibility etiketli diğer sorulara göz atın veya kendi sorunuzu sorun.
Kaynak:
Blogger Tak ve Çalıştır - jQuery Araçları ve Pencere Öğeleri: Öğenin gizli veya jQuery Kullanılarak Görünür Olup Olmadığını Anlama
|
Gizli veya görünür öznitelikler basitçe kullanılabilir, örneğin:
$ ['element: gizli')
$ ['element: görünür')
Veya aynısını aşağıdaki gibi basitleştirebilirsiniz.
$ (element) .is (": görünür")
|
ebdiv, style = "display: none;" olarak ayarlanmalıdır. Hem göstermek hem de saklamak için çalışıyor:
$ (belge) .ready (işlev () {
$ ("# eb"). tıklayın (function () {
$ ("# ebdiv"). toggle ();
});
});
|
Dikkate almanız gereken bir başka cevap da, eğer bir öğeyi gizliyorsanız, jQuery kullanmanız gerekir, ancak onu gerçekten gizlemek yerine, tüm öğeyi kaldırırsınız, ancak HTML içeriğini ve etiketinin kendisini bir jQuery değişkenine kopyalayıp Tek yapmanız gereken, ekranda böyle bir etiket olup olmadığını test etmek, normal if (! $ ('# theagname']. length).
|
Bir öğeyi jQuery'de gizli seçici karşısında test ederken, mutlak konumlandırılmış bir öğenin, alt öğeleri görünür olmasına rağmen gizli olarak tanınabileceği dikkate alınmalıdır.
Bu, ilk etapta biraz mantıksız görünüyor - jQuery belgelerine daha yakından bakmak, ilgili bilgileri veriyor:
Öğeler çeşitli nedenlerle gizli olarak kabul edilebilir: [...] Genişlikleri ve yükseklikleri açıkça 0'a ayarlanmıştır. [...]
Yani bu aslında kutu modeli ve eleman için hesaplanan stil açısından mantıklı. Genişlik ve yükseklik açıkça 0 olarak ayarlanmasa bile, dolaylı olarak ayarlanabilir.
Aşağıdaki örneğe bir göz atın:
console.log ($ ['. foo']. is (': gizli')); // doğru
console.log ($ ['. bar']. is (': gizli')); // yanlış
.foo {
konum: mutlak;
sol: 10px;
üst: 10px;
arka plan: # ff0000;
}
.bar {
konum: mutlak;
sol: 10px;
üst: 10px;
genişlik: 20px;
yükseklik: 20px;
arka plan: # 0000ff;
}
JQuery 3.x için güncelleme:
JQuery 3 ile açıklanan davranış değişecek! Sıfır genişlik ve / veya yüksekliğe sahip olanlar da dahil olmak üzere herhangi bir yerleşim kutusu varsa, öğeler görünür olarak kabul edilecektir.
JQuery 3.0.0-alpha1 ile JSFiddle:
http://jsfiddle.net/pM2q3/7/
Aynı JavaScript kodu daha sonra şu çıktıya sahip olacaktır:
console.log ($ ['. foo']. is (': gizli')); // yanlış
console.log ($ ['. bar']. is (': gizli'));// yanlış
|
Bu işe yarayabilir:
bekle ($ ("# mesaj_div"). css ("görüntüleme")). toBe ("yok");
|
Misal:
$ (belge) .ready (işlev () {
eğer ($ ("# checkme: gizli"). uzunluk) {
console.log ('Gizli');
}
});
|
Görünüp görünmediğini kontrol etmek için kullanıyorum!:
eğer (! $ ['# kitap']. is (': görünür')) {
uyarı ('# kitap görünmüyor')
}
Veya aşağıdaki aynı zamanda, jQuery seçiciyi birden çok kez ihtiyaç duyduğunuzda daha iyi performansa sahip olmak için bir değişkene kaydederek:
var $ kitap = $ ('# kitap')
eğer (! $ book.is (': visible')) {
uyarı ('# kitap görünmüyor')
}
|
Stil düzenlemeyi değil, sınıf geçişini kullanın. . .
Öğeleri "gizlemek" için belirlenmiş sınıfları kullanmak kolaydır ve aynı zamanda en verimli yöntemlerden biridir. Görüntü stili 'yok' olan bir sınıfın 'gizli' olarak değiştirilmesi, bu stili doğrudan düzenlemekten daha hızlı sonuç verecektir. Bunun bir kısmını Stack Overflow sorusunda oldukça ayrıntılı bir şekilde açıkladım.Aynı div içinde iki öğeyi görünür / gizli hale getirme.
En İyi JavaScript Uygulamaları ve Optimizasyonu
İşte Google ön uç mühendisi Nicholas Zakas'ın Google Tech Talk'un gerçekten aydınlatıcı bir videosu:
Javascript'inizi Hızlandırın (YouTube)
|
Reklam engelleyici için görünür kontrolü kullanma örneği etkinleştirildi:
$ (belge) .ready (işlev () {
eğer (! $ ("# ablockercheck"). is (": görünür"))
$ ("# ablockermsg"). text ("Lütfen reklam engelleyiciyi devre dışı bırakın."). show ();
});
"ablockercheck", adblocker'ın engellediği bir kimliktir. Dolayısıyla, görünür olup olmadığını kontrol ederek, reklam engelleyicinin Açık olup olmadığını tespit edebilirsiniz.
|
Ne de olsa hiçbir örnek bana uymuyor, bu yüzden kendim yazdım.
Testler (Internet Explorer filtresi desteği yok: alfa):
a) Belgenin gizli olup olmadığını kontrol edin
b) Bir elemanın sıfır genişlik / yükseklik / opaklığa sahip olup olmadığını kontrol edin veya görüntü: yok / görünürlük: satır içi stillerde gizli
c) Öğenin merkezinin (her piksel / köşeyi test etmekten daha hızlı olması nedeniyle) başka bir öğe (ve tüm atalar, örneğin: overflow: hidden / scroll / bir öğe diğerinin üzerinde) veya ekran kenarları tarafından gizlenmediğini kontrol edin
d) Bir elemanın sıfır genişlik / yükseklik / opaklığa sahip olup olmadığını kontrol edin veya görüntü: yok / görünürlük: hesaplanan stillerde gizli (tüm atalar arasında)
Üzerinde test edildi
Android 4.4 (Yerel tarayıcı / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (Internet Explorer 5-11 belge modu + sanal makine) ve Safari (Windows / Mac / iOS).
var is_visible = (function () {
var x = window.pageXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset? window.pageYOffset + window.innerHeight - 1: 0,
göreli = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
function inside (child, parent) {
while (çocuk) {
eğer (çocuk === ebeveyn) true döndürür;
child = child.parentNode;
}
yanlış dönüş;
};
dönüş işlevi (elem) {
Eğer (
document.hidden ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'gizli' ||
elem.style.display == 'yok' ||
elem.style.opacity === 0
) yanlış döndür;
var rect = elem.getBoundingClientRect ();
eğer (göreceli) {
eğer (! inside (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) false döndürürse;
} else if (
! içinde (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.left + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (window.innerWidth || document.documentElement.clientWidth)
)
) yanlış döndür;
eğer (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = null;
while (el) {
eğer (el === belge) {break;} else if (! el.parentNode) yanlış döndürür;
comp = window.getComputedStyle? window.getComputedStyle (el, null): el.currentStyle;
eğer (comp && (comp.visibility == 'hidden' || comp.display == 'none' || (typeof comp.opacity! == 'undefined' && comp.opacity! = 1))) false döndür;
el = el.parentNode;
}
}
doğruya dön;
}
}) ();
Nasıl kullanılır:
is_visible (elem) // boole
|
İkisini de kontrol etmeniz gerekiyor ... Görünürlüğün yanı sıra ekran:
eğer ($ (this) .css ("display") == "yok" || $ (this) .css ("visibility") == "gizli") {
// Öğe görünmüyor
} Başka {
// Eleman görülebilir
}
$ (This) .is (": visible") olup olmadığını kontrol edersek, jQuery her ikisini de otomatik olarak kontrol eder.
|
Belki böyle bir şey yapabilirsin
$ (belge) .ready (işlev () {
var visible =$ ['# tElement']. is (': görünür');
eğer (görünür) {
uyarı ("görünür");
// Kod
}
Başka
{
uyarı ("gizli");
}
});
Ad
|
Aşağıdaki gibi bir boole değerini kontrol ederek görünürlüğü kontrol edin:
eğer (this.hidden === yanlış) {
// Senin kodun
}
Bu kodu her işlev için kullandım. Aksi takdirde, bir öğenin görünürlüğünü kontrol etmek için is (': visible') kullanabilirsiniz.
|
Görünürlük: gizli veya opaklık: 0 olan Öğeler görünür olarak kabul edildiğinden, düzende hala yer kapladıkları için (jQuery: visible Selector için açıklandığı gibi) - öğenin gerçekten görünür olup olmadığını şu şekilde kontrol edebiliriz:
function isElementReallyHidden (el) {
$ (el) .is (": gizli") || $ (el) .css ("görünürlük") == "gizli" || $ (el) .css ('opaklık') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl) .parents (). her biri (function () {
if (isElementReallyHidden (this)) {
booElementReallyShowed = false;
}
});
|
Peki ya öğenin CSS'si aşağıdaki gibiyse?
.element {
konum: mutlak; sol: -9999;
}
Bu nedenle Yığın Taşması sorusuna verilen bu yanıt Bir öğenin ekran dışında olup olmadığı nasıl kontrol edilir de dikkate alınmalıdır.
|
Öğenin kullanıcı arayüzünde gösterilip gösterilmediğini ölçmek için görünürlük / görüntüleme niteliklerini kontrol etmek için bir işlev oluşturulabilir.
function checkUIElementVisible (element) {
return ((element.css ('görüntü')! == 'yok') && (element.css ('görünürlük')! == 'gizli'));
}
Çalışma Keman
|
Ayrıca, öğenin durumunu kontrol etmek ve sonra değiştirmek için üç terimli koşullu ifade de burada verilmiştir:
$ ['someElement']. on ('click', function () {$ ('elementToToggle']. is (': visible')? $ ['elementToToggle']. hide ('yavaş'): $ ('elementToToggle ') .show (' yavaş ');});
|
eğer ($ ['# postcode_div']. is (': görünür')) {
eğer ($ ['# postcode_text']. val () == '') {
$ ('# spanPost']. metin ('\ u00a0');
} Başka {
$ ('# spanPost']. text ($ ('# postcode_text'). val ());
}
|
1
2
Sonraki
Oldukça aktif soru. Bu soruyu cevaplamak için 10 itibar kazanın. İtibar koşulu, bu sorunun istenmeyen postalardan ve yanıtlanmayan etkinliklerden korunmasına yardımcı olur.
Aradığın cevap değil mi? Javascript jquery dom visibility etiketli diğer sorulara göz atın veya kendi sorunuzu sorun.